<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">

</head>

<body>
    <div class="container">
        <h4>单项目</h4>
        <div class="big">
            <div class="small"></div>
        </div>
        <h4>1.希望元素主轴水平</h4>
        <div class="big zhuzhou">
            <div class="small"></div>
        </div>
        <h4>2.元素在尾部显示</h4>
        <div class="big wei">
            <div class="small"></div>
        </div>
        <h4>3.侧轴居中,主轴不变</h4>
        <div class="big zhongjian">
            <div class="small"></div>
        </div>
        <h4>4.侧轴居中,主轴不变</h4>
        <div class="big quanbu">
            <div class="small"></div>
        </div>
        <h4>5.主轴居中,侧轴尾部</h4>
        <div class="big cewei">
            <div class="small"></div>
        </div>
        <h4>6.主轴,侧轴尾部</h4>
        <div class="big quanwei">
            <div class="small"></div>
        </div>
        <h4>双项目</h4>
        <div class="big shuang">
            <div class="small"></div>
            <div class="small"></div>
        </div>
        <h4>2.主轴不变,侧轴两侧</h4>
        <div class="big shuangce">
            <div class="small"></div>
            <div class="small"></div>
        </div>
        <h4>3.竖向显示,居中两侧</h4>
        <div class="big three">
            <div class="small"></div>
            <div class="small"></div>
        </div>
        <h4>4.竖向显示,尾部两侧</h4>
        <div class="big weibuCe">
            <div class="small"></div>
            <div class="small"></div>
        </div>
        <h4>四项目</h4>
        <div class="big yici">
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
        <h4>2.四个角</h4>
        <div class="big da">
            <div class="box">
                <div class="small"></div>
                <div class="small"></div>
            </div>
            <div class="box">
                <div class="small"></div>
                <div class="small"></div>
            </div>
        </div>
        <h4>2.六个角</h4>
        <div class="big biaSix">
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
        <h4>2.1六个角</h4>
        <div class="big bianSix">
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
    </div>
</body>

</html>